import React, { Component } from 'react'
import { connect } from 'react-redux'
class Home extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    return (
      <div>
        {
          this.props.bannerList.map(item => {
            return (
              <img style={{ width: 100}} src = { item.img } key = { item.bannerid } alt={item.alt}/>
            )
          })
        }

        <ul>
          {
            this.props.proList.map(item => {
              return (
                <li key = { item.proid }>
                  { item.proname }
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect((state) => {
  return {
    bannerList: state.bannerList,
    proList: state.proList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      fetch('http://121.89.205.189/api/banner/list')
        .then(res => res.json())
        .then(res => {
          console.log(res)
          dispatch({
            type: 'CHANGE_BANNER_LIST',
            payload: res.data
          })
        })
    },
    getProList () {
      fetch('http://121.89.205.189/api/pro/list')
        .then(res => res.json())
        .then(res => {
          console.log(res)
          dispatch({
            type: 'CHANGE_PRO_LIST',
            payload: res.data
          })
        })
    }
  }
})(Home)